<template>
  <div class="drawer-item">
    <el-switch
      :value="userForm.packageMaterialType"
      active-color="#ff4949"
      inactive-color="#1890ff"
      :active-text="$t('userInfo.custom')"
      :inactive-text="$t('userInfo.default')"
      :inactive-value="1"
      :active-value="2"
      @change="setPackageMaterialDefault"
    >
    </el-switch>
    <div class="package-meterial-content font-bold font-grey mgt20">
      <div class="package-server">{{ $t('setting.Packaging material') }}</div>
      <div class="package-name">{{ $t('setting.Foreground display name') }}</div>
      <div class="package-price">{{ $t('setting.Unit price') }}</div>
    </div>
    <div
      class="package-meterial-content"
      v-for="(item,index) in userForm.packageMaterial"
      :key="index"
    >
      <div class="package-server">
        {{$t('order.Packaging materials or Services')}}{{index+1}}:
      </div>
      <div class="package-name">
        <span>{{item.name}}</span>
      </div>
      <div class="package-price">
        <el-input-number
          v-model="item.price"
          @change="changePackageMaterial"
          autocomplete="off"
          :precision="2"
          :min="0"
        ></el-input-number>
        <span style="margin-left: 5px">{{$t('setting.unit1')}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import {deepCopy} from "@/utils";

export default {
  name: 'PackageMeterialDrawerItem',
  props: {
    userSetting: {
      type: Object,
    },
    userForm: {
      type: Object,
    },
    setting: {
      type: Object,
    }
  },
  data(){
    return {}
  },
  methods: {
    changePackageMaterial(){
      this.userForm.packageMaterialType = 2;
    },
    setPackageMaterialDefault(){
      if(this.userForm.packageMaterialType === 1){
        this.userForm.packageMaterialType = 2;
      }else{
        this.userForm.packageMaterialType = 1;
      }
      this.userForm.packageMaterial = deepCopy(this.setting.packageMaterial);
    },
  }
}
</script>

<style scoped lang="scss">
@import "../scss/drawer-item";
</style>
